<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="center_a">
			<view class="centers  flexleft flexcenter">
				<image src="../../static/images/xiangqing_slices/return.png" mode="" class="img" @click="fanhui">
				</image>
				<view class="all" :class="lable==1?'gongying':' xuqui'" @click="changelable(1)">供应</view>
				<view class="alls" :class="lable==2?'gongying':'xuqui'" @click="changelable(2)">需求</view>
			</view>
		</view>
		<view class="content">
			<!-- 搜索框 -->
			<view class=" ">
				<view class="flexleft">
					<view class="ss flexleft">
						<image src="@/static/images/sy_slices/search.png" mode="" class="search"></image>
						<input type="text" placeholder="请输入搜索内容" class="inp" v-model="keywords" confirm-type="search"
							@confirm="init">
					</view>
				</view>
				<!-- 筛选 -->
				<view class="flexbetween header">
					<uni-data-picker @change="bindPickerChange" :localdata="items">
						<view class="flexleft nostrongtext">地区<view class="grey_jiao paixu"></view>
						</view>
					</uni-data-picker>
					<view @click="cklxshow=true" class="flexleft nostrongtext">仓库类型<view class="grey_jiao paixu"></view>
					</view>
					<view @click="show_fenlei=true" class="flexleft nostrongtext">筛选<view class="grey_jiao paixu">
						</view>
					</view>
				</view>
				<view class="flexbetween nav">
					<view :class="zh_sort!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changezh">
						<view class="zong">综合</view>
						<view :class="zh_sort==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="zh_sort==2?'blue_bottom':'grey_bottom'"></view>
					</view>
					<view :class="distance_sort!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changejl">
						<view class="zong">距离</view>
						<view :class="distance_sort==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="distance_sort==2?'blue_bottom':'grey_bottom'"></view>
					</view>
					<view :class="ckmj_sort!=0?'gaoliang flexleft':'bugaoliang flexleft'" @click="changemj">
						<view class="zong">面积</view>
						<view :class="ckmj_sort==1?'blue_up nav_right':'grey_top nav_right'"></view>
						<view :class="ckmj_sort==2?'blue_bottom':'grey_bottom'"></view>
					</view>
				</view>
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view v-show="lable==1">
						<view class="chuzu flexleft" @click="cangchuxq(item.id)" v-for="item in list.data"
							:key="item.id">
							<view class="yxlable" v-show="item.yx_type==1">优选</view>
							<view class="ccimg_relative">
								<image :src="item.image_text" mode="" class="chuzu_img"></image>
								<view class="right_chuzu" v-show="item.item.name=='出租'">{{item.item.name}}</view>
								<view class="right_chushou" v-show="item.item.name=='出售'">{{item.item.name}}</view>
							</view>
							<view class="chuzu_a">
								<view class="flexbetween">
									<view class="word_weight">{{item.ckmj}}㎡{{item.ckitem.name}}</view>
								</view>
								<view class="chuzu_center flexleft">
									<image src="@/static/images/sy_slices/hongbi.png" mode="" class="tubiao"></image>
									<view class="yuan">{{item.cszj}}</view>
								</view>
								<view class="dingwie flexleft">
									<view class="location"></view>
									<view class="dizhi">{{item.cityinfo}}</view>
									<view class="word_bluer">{{kmUnit(Number(item.distance))}}</view>
								</view>
							</view>
						</view>
					</view>

					<view v-show="lable==2">
						<view class="chuzu flexleft" @click="xiangqing(item.id)" v-for="item in list.data"
							:key="item.id">
							<view class="yxlable" v-show="item.yx_type==1">优选</view>
							<view class="ccimg_relative">
								<image :src="item.image_text" mode="" class="chuzu_img"></image>
								<view class="right_chuzu" v-show="item.item.name=='出租'">{{item.item.name}}</view>
								<view class="right_chushou" v-show="item.item.name=='出售'">{{item.item.name}}</view>
							</view>
							<view class="chuzu_a">
								<view class="flexbetween">
									<view class="word_weight">{{item.ckmj}}㎡{{item.ckitem.name}}</view>
								</view>
								<view class="chuzu_center flexleft">
									<image src="@/static/images/sy_slices/hongbi.png" mode="" class="tubiao"></image>
									<view class="yuan">{{item.cszj}}</view>
								</view>
								<view class="dingwie flexleft">
									<view class="location"></view>
									<view class="dizhi">{{item.cityinfo}}</view>
									<view class="word_bluer">{{kmUnit(Number(item.distance))}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>
			</view>
		</view>
		<!-- 筛选-->
		<u-popup :show="show_fenlei" :round="10" mode="bottom" @close="close" @open="open">
			<view class="nav">
				<view class="form">筛选</view>
				<view class="word_weight">用途类型</view>
				<view class=" flexleft flex_wrap mainpadding2">
					<view :class="item.id==ytlxid?'lan':'pu'" v-for="item in ytlx" :key="item.id"
						@click="ytlxchange(item.id,0)">{{item.name}}</view>
				</view>
				<view class=" word_weight">供需类型</view>
				<!-- 供应 -->
				<view class="flexleft flex_wrap mainpadding2" v-show="lable==1">
					<view :class="item.id==gylxid?'lan':'pu'" v-for="item in gylx" :key="item.id"
						@click="ytlxchange(item.id,1)">{{item.name}}</view>
				</view>
				<!-- 需求 -->
				<view class="flexleft flex_wrap mainpadding2" v-show="lable==2">
					<view :class="item.id==xqlxid?'lan':'pu'" v-for="item in xqlx" :key="item.id"
						@click="ytlxchange(item.id,2)">{{item.name}}</view>
				</view>
				<view class=" word_weight">仓库面积㎡</view>
				<view class="flexbetween margin_top">
					<input type="number" placeholder="仓库面积最小值" class="iteminput" v-model="min_mj">
					<input type="number" placeholder="仓库面积最大值" class="iteminput" v-model="max_mj">
				</view>
				<view class="footer flexbetween">
					<view class="resetbtn " @click="reset">重置</view>
					<view class=" surebtn" @click="Confirm">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 仓库类型选择器 -->
		<cangkulxpicker :messageInfo="{cklxshow:cklxshow}" @surecklx="surecklx"></cangkulxpicker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				lable: 1, //1供应，2需求
				keywords: "",
				show_fenlei: false,
				// 筛选
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: [],
				// 仓库数据
				lat: "",
				lng: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				// 仓库类型选择器组件内容开始
				cklxshow: false,
				cklx: {
					name: "",
					id: "",
				},
				// 仓库类型选择器组件内容结束
				ytlx: [], //用途类型
				ytlxid: "",
				gylx: [], //供应类型
				gylxid: "",
				xqlx: [], //需求类型
				xqlxid: "",
				zh_sort: 0, //0=不按综合排序,1=降序.2=升序
				distance_sort: 0, //0=不按距离排序,1=降序,2=升序
				ckmj_sort: 0, //0=不按仓库面积,1=降序,2=升序
				min_mj: "",
				max_mj: "",
			}
		},
		onLoad() {
			// 添加全国，向每个市,区里面添加不限，
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "0312",
						"text": "不限",
						"pid": "0304"
					})
				})
				item.children.unshift({
					"value": "0311",
					"text": "不限",
					"pid": "0304",
				})
			})
			arr.unshift({
				"value": "0310",
				"text": "全国",
				"pid": "0304",
			})
			this.items = arr
			this.getlocation()
			this.getytlx() //用途类型
			this.gyxqlx() //供应需求类型
		},
		onPageScroll(res) {
				if (res.scrollTop > 700) {
					this.$refs.backtops.isshow = true
				} else {
					this.$refs.backtops.isshow = false
				}
			},
		methods: {
			// 用途类型
			getytlx() {
				httpRequest.request('/api/cc/ytItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.ytlx = res.data
					}
				})
			},
			// 供需类型
			gyxqlx() {
				httpRequest.request('/api/cc/ccItem', 'GET', {
					type: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.gylx = res.data
					}
				})
				httpRequest.request('/api/cc/ccItem', 'GET', {
					type: 2
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.xqlx = res.data
					}
				})
			},
			surecklx(e) {
				this.cklx = e
				this.init()
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/cc/ccList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng,
					keywords: this.keywords,
					type: this.lable, //1=供应.2=需求
					cc_item_id: this.lable == 1 ? this.gylxid : this.xqlxid, //仓储类型ID
					ck_item_id: this.cklx.id, //仓库类型ID
					min_mj: this.min_mj, //最小仓储面积
					max_mj: this.max_mj, //最大仓储面积
					province_id: this.address.province, //省ID
					city_id: this.address.city, //市ID
					area_id: this.address.county, //区ID
					zh_sort: this.zh_sort, //综合排序:0=不按综合排序,1=降序.2=升序
					distance_sort: this.distance_sort, //距离排序:0=不按距离排序,1=降序,2=升序
					ckmj_sort: this.ckmj_sort, //仓库面积排序:0=不按仓库面积,1=降序,2=升序
					index_yx: 0, //优选仓储:0=不优选,1=优选
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}

				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changezh() {
				this.zh_sort = this.zh_sort == 1 ? 2 : this.zh_sort == 2 ? 0 : 1
				this.init()
			},
			changejl() {
				this.distance_sort = this.distance_sort == 1 ? 2 : this.distance_sort == 2 ? 0 : 1
				this.init()
			},
			changemj() {
				this.ckmj_sort = this.ckmj_sort == 1 ? 2 : this.ckmj_sort == 2 ? 0 : 1
				this.init()
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if (area.length == 3) {
					this.area = [area[0].text, area[1].text, area[2].text];
					this.address.province = area[0].value;
					this.address.city = area[1].value;
					this.address.county = area[2].value=="0312"?"":area[2].value;
				} else if (area.length == 2){
					this.area = [area[0].text, area[1].text, "不限"];
					this.address.province = area[0].value;
					this.address.city = area[1].value=="0311"?"":area[1].value;
					this.address.county = ""
				}else{
					this.area = ["全国", "不限", "不限"];
					this.address.province = "";
					this.address.city = "";
					this.address.county = ""
				}
				this.init()
			},
			changelable(value) {
				this.lable = value
				this.init()
			},
			xiangqing(id) {
				uni.navigateTo({
					url: '/pages/index/cangchuxqxq?id=' + id
				})
			},
			fanhui() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			cangchuxq(id) {
				uni.navigateTo({
					url: '/pages/index/cangchugyxq?id=' + id
				})
			},
			ytlxchange(id, value) {
				if (value == 0) {
					this.ytlxid = id
				} else if (value == 1) {
					this.gylxid = id
				} else {
					this.xqlxid = id
				}
			},
			reset() {
				this.ytlxid = ""
				this.gylxid = ""
				this.xqlxid = ""
				this.min_mj = ""
				this.max_mj = ""
				this.init()
				this.show_fenlei = false;
			},
			Confirm() { //点击确认关闭弹窗
				this.show_fenlei = false;
				this.init()
			},
			close() {
				this.show_fenlei = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iteminput {
		width: 40%;
		border-radius: 50rpx;
		padding: 20rpx 20rpx;
		text-align: center;
		// box-sizing: border-box;
		font-size: 28rpx;
		background: RGBA(247, 249, 250, 1);
	}

	.paixu {
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.nav_right {
		margin-right: 10rpx;
	}

	.img {
		width: 16rpx;
		height: 28rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 36rpx;
	}

	.content {
		padding: 70rpx 24rpx 30rpx 24rpx;
	}

	.centers {
		position: fixed;
		left: 0;
		z-index: 300;
		width: 100%;
		box-sizing: border-box;
		top: 0;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding: 83rpx 0rpx 16rpx 0rpx;
		background-color: #fff;
		padding-top: 100rpx;
	}

	.center_a {
		padding: 100rpx 0rpx 30rpx 0rpx;
		background-color: #ffff;
	}

	.all {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.alls {
		background: #228DFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.xuqui {
		background: #fff;
		color: #228DFF;
		border: 2rpx solid #228DFF;
	}

	.gongying {
		background: #228DFF;
		color: #ffff;
		border: 2rpx solid #228DFF;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
	}

	.ss {
		width: 100%;
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 18rpx 20rpx 18rpx 42rpx;
	}

	.inp {
		background-color: #f3f3f3;
		width: 400rpx;
		padding: 0rpx 0rpx 0rpx 24rpx;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.center {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.zong {
		padding-right: 6rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.form {
		text-align: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		margin: 30rpx 10rpx 0 0;
		width: 200rpx;
		padding: 20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.footer {
		padding: 30rpx 30rpx 60rpx 30rpx;
	}

	.gaoliang {
		padding: 9rpx 43rpx 10rpx 27rpx;
		background-color: RGBA(228, 239, 250, 1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		// margin-right: 30rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.bugaoliang {
		padding: 9rpx 43rpx 10rpx 27rpx;
		background-color: #fff;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		// margin-right: 30rpx;
	}



	.nav {
		padding: 30rpx 30rpx;
	}

	//
	.chuzu_img {
		width: 132rpx;
		height: 132rpx;
		background-size: 100% 100%;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

	}

	.chuzu {
		padding: 30rpx 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		position: relative;

	}

	.tubiao {
		width: 16rpx;
		height: 23rpx;
		padding-right: 14rpx;
	}

	.dizhi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-right: 16rpx;
	}



	.chuzu_a {
		padding-left: 19rpx;
		flex-grow: 1;
		align-self: flex-start;
	}

	.chuzu_center {
		padding-top: 14rpx;
	}

	.dingwie {
		padding-top: 16rpx;
	}

	.yuan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF3A3A;
	}
</style>